CSS-модель кольору (oklch())
OKLCH — це сучасна CSS-модель кольору (oklch()), яка працює з параметрами Lightness (світлість), Chroma (хроматичність/насиченість) та Hue
(відтінок), а також опціональною прозорістю (alpha), що робить її більш
інтуїтивно зрозумілою та рівномірною для людського ока порівняно з
RGB/HSL. Щоб зрозуміти її, уявіть, що ви контролюєте яскравість (L), інтенсивність (C) та колір (H) окремо, а прозорість (A) додається в кінці.
Основні компоненти:
- L (Lightness): Світлість. Від 0% (чорний) до 100% (білий). В OKLCH рівні кроки сприймаються як рівні зміни яскравості.
- C (Chroma): Насиченість/хроматичність. Від 0 (сірий) до максимально можливого значення (найінтенсивніший відтінок).
- H (Hue): Відтінок. Кут на колі (0–360°), що визначає сам колір (червоний, зелений, синій тощо).
- A (Alpha): Прозорість. Значення від 0 (повністю прозорий) до 1 (повністю непрозорий).
Як це працює в CSS:
Використовується функція
Використовується функція
oklch(L C H / A) або oklch(L C H).oklch(90% 0.3 250): Яскравий блакитно-фіолетовий колір.oklch(70% 0 100%): Сірий колір (нульова насиченість) певної яскравості.oklch(50% 0.2 100 / 0.5): Колір з 50% яскравості, 20% насиченості, 100° відтінком (синій/блакитний) та 50% прозорістю (напівпрозорий).
Переваги перед RGB/HSL:
- Більш інтуїтивно: Зміна яскравості (L) не спотворює насиченість (C) так, як це було в HSL. Легше створювати градієнти та варіації кольору.
- Більше кольорів: Охоплює ширший діапазон кольорів, включаючи яскравіші, які неможливо було представити в RGB або HSL.